<!DOCTYPE html>
<html>
    <head>
        <title>《咸阳城东楼》晚唐许浑</title>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="./index.css"></link>
        <script type="text/javascript" src="../common/util.js"></script>
        <!-- <style type="text/css">
           
        </style> -->
    </head>
    <body>
        <div class="inputArea">
          <input type="number" id="width" value="100" onkeyup="handleKeyUp()" />
          <button type="button" onclick='handleChangeWidth()'>提交</button>
        </div>
        <button type="button" onclick='handleShow()'>show</button>
        <div id="test" class="pane">
          <div id="root">
            <div id="parent"
              onstorage='handleChangeWidth()'              
              >
                <div id="shadow" style="width: 203">
                    溪云初起日沉阁，山雨欲来风满楼。
                </div>
                <div id="child">
                    溪云初起日沉阁，山雨欲来风满楼。
                  </div>
            </div>
          </div>
        </div>
        <div id="resultContainer">
            <table id="reslutTable">
              <tr>
                <th>浏览器名称</th>
                <th>节点名称</th>
                <th>clientWidth</th>
                <th>offsetWidth</th>
                <th>scrollWidth</th>
                <th>getComputedStyle-width</th>
              </tr>
            </table>
        </div>
        <script type="text/javascript">
            function logWidth () {
              var parent = document.getElementById('parent');
              var child = document.getElementById('child');
              var shadow = document.getElementById('shadow');
              var table = document.getElementById('reslutTable');
              var len=table.rows.length;
              while (len>1) {
                table.deleteRow(1);
                len=table.rows.length;
              }
              var nodes = [parent, child, shadow]
              for(var i=0;i<nodes.length;i++){
                      var row= table.insertRow(-1);
                      var node = nodes[i];
                      columnData = [
                        getBrowser(),
                        node.id,
                        node.clientWidth,
                        node.offsetWidth,
                        node.scrollWidth,
                        getComputedStyle(node).width,
                      ]
                      for(var j=0;j<columnData.length;j++){
                          row.insertCell(-1).innerHTML=columnData[j];
                      }
              }
            }
            window.onload = function () {
              /*
              * JS实现类数组对象调用forEach()方法
              * @author 吴先成 www.wuxiancheng.cn
              */
              HTMLCollection.prototype.toArray=function(){
                      return [].slice.call(this);
              };
              var observer = new MutationObserver(handleChangeWidth);
              var parent = document.getElementById('parent');
              var panes = document.getElementsByClassName('pane').toArray().forEach(function (pane) {
                if (isParent(parent, pane)){
                  var  options = {
                    'attributes': true,
                    'characterData': true,
                    'childList': true,
                    'subtree': true,
                  } ;

                  observer.observe(pane, options);
                }
              });
              logWidth()
            };
            function handleChangeWidth() {
              var root = document.getElementById('root');
              var width = document.getElementById('width').value || 100;
              root.style.width = width + 'px'
              console.clear()
              logWidth();
            }
            function handleKeyUp(event) {
              var event = event || window.event || arguments.callee.caller.arguments[0];
              if (event.keyCode == 13) {
                console.clear()
                console.log('keyup', event, window.event, arguments.callee.caller.arguments)
                handleChangeWidth()
              }
            }
            function handleShow(event) {
              var test = document.getElementById('test');
              test.style.display = "block"
              // handleChangeWidth()
            }
        </script>
    </body>
</html>
